"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/10/31
 */
const {PureComponent} = require('react');
import * as React from 'react';
import {dynamicStyles} from "../assets/styles/community";
import {DynamicItemProps} from "../interface/index";
import MyText from "./MyText";
import {commonStyles} from "../assets/styles/common";
import MyIcon from "./icon";
import Line from "./Line";
import {SCREEN_WIDTH} from "../constant";
import Avatar from "./Avatar";
import Request from "../utils/Request";
import MyImage from "./MyImage";
import {AuthModel} from "../models/model";

const {Actions} = require("react-native-router-flux");
const {CachedImage, ImageCache} = require('react-native-img-cache');

const {View, Image, TouchableOpacity} = require('react-native');
const {connect} = require('react-redux');
const {ActionSheet} = require('antd-mobile');

class DynamicItem extends PureComponent<DynamicItemProps, any> {

    static defaultProps = {
        id: 0,
        name: '',
        avatar: '',
        company: '',
        time: '',
        content: '',
        like: 0,
        comment: 0,
        liked: false,
        images: null,


        onLikePress: null,
        onCommentPress: null,
        onUserInfoPress: null,
        onAvatarPress: null,

    };

    state = {
        imageWidth: SCREEN_WIDTH,
        imageHeight: 20
    };


    //更多操作
    operationPress = () => {

        let options = ['静音通知', '举报', '取消',];

        const item: postItem = this.props.item;
        const auth: AuthModel = this.props.auth;

        if (item.user.id === auth.userInfo.id) {
            options = ['静音通知', '删除', '取消',];
        }
        ActionSheet.showActionSheetWithOptions({
                options,
                cancelButtonIndex: options.indexOf('取消'),
                destructiveButtonIndex: options.indexOf('删除'),
                maskClosable: true,
            },
            (buttonIndex) => {
                if (options[buttonIndex] === '删除') {
                    this.props.dispatch({
                        type: 'post/deletePost',
                        payload: {
                            post: item
                        }
                    })
                }
            });
    };

    //赞 点击
    likePress = () => {
        if (this.props.onLikePress) {
            this.props.onLikePress(this.props.item)
        }
    };


    //评论点击
    commentPress = () => {
        if (this.props.onCommentPress) {
            this.props.onCommentPress()
        }
    };

    //翻译点击
    translatePress = () => {

    };

    //用户信息点击
    userInfoPress = () => {
        if (this.props.onUserInfoPress) {
            this.props.onUserInfoPress()
        }
    };

    //内容点击
    onContentPress = () => {
        this.props.onContentPress && this.props.onContentPress(this.props.item);
    };
    //图片加载完成
    onLoad = (e) => {
        if (e.nativeEvent.source) {
            this.setState({
                imageWidth: SCREEN_WIDTH,
                imageHeight: e.nativeEvent.source.height / e.nativeEvent.source.width * SCREEN_WIDTH
            })
        } else {
            this.setState({
                imageWidth: SCREEN_WIDTH,
                imageHeight: 0
            })
        }
    };

    //头像点击
    onAvatarPress = (user) => {
        if (this.props.onAvatarPress) {
            this.props.onAvatarPress(user);
        } else {
            Actions.userProfile({userInfo: user});
        }
    };


    //用户信息点击
    onUserInfoPress = (company: commentItem) => {
        this.props.onUserInfoPress && this.props.onUserInfoPress(company)
    };
    //获取赞的数量
    getPraiseCount = () => {
        if (!this.props.item.praise) return 0;
        return this.props.item.praise.counts;
    };

    //获取用户赞的标志
    getPraiseFlag = () => {
        let flag = false;
        if (this.props.item.praise) {
            if (Array.isArray(this.props.item.praise.praiseDTOList)) {
                this.props.item.praise.praiseDTOList.map((item: praiseDTO) => {
                    if (item.userId === this.props.auth.userInfo.id) {
                        flag = true;
                    }
                })
            }
        }
        return flag;
    };

    //获取评论数量
    getCommentsCount = () => {
        if (!this.props.item.comments) return 0;
        if (!Array.isArray(this.props.item.comments)) return 0;
        return this.props.item.comments.length;
    };

    //动态的附加图片
    renderImages = () => {
        const {item} = this.props;
        if (!item || (!item.pic)) return null;
        return (
            <View
                style={{width: this.state.imageWidth, height: this.state.imageHeight, backgroundColor: 'transparent'}}>
                <MyImage source={{uri: Request.checkImageUrl(item.pic)}}
                         onLoad={this.onLoad}
                         style={{
                             width: this.state.imageWidth,
                             height: this.state.imageHeight,
                             backgroundColor: 'transparent'
                         }}/>

            </View>

        );
    };


    //动态正文
    renderContent = (content = null) => {

        if (!content) return null;
        return (
            <View style={dynamicStyles.contentContainer}>
                <MyText style={dynamicStyles.content} numberOfLines={10}>{content}</MyText>
                <TouchableOpacity onPress={this.translatePress}>
                    <MyText style={dynamicStyles.translate}>查看翻译</MyText>
                </TouchableOpacity>

            </View>
        )
    };

    render() {
        if (!this.props.item) {
            return null;
        }

        const {
            item
        } = this.props;
        const user: userItem = item.user;


        return (
            <View style={[dynamicStyles.item, {padding: 0}]}>
                <View style={[commonStyles.flexRow, dynamicStyles.userInfo, {padding: 10}]}>
                    <Avatar source={{uri: user.avatar}}
                            borderWidth={5}
                            borderColor='rgb(224,224,224)'
                            size={60}
                            onPress={this.onAvatarPress.bind(null, this.props.item.user)}/>
                    <TouchableOpacity style={dynamicStyles.userInfoTextInfo}
                                      onPress={this.onUserInfoPress.bind(this, user.company)}>
                        <MyText style={dynamicStyles.name}>{user.nickName}</MyText>
                        <MyText style={dynamicStyles.company}>{user.company.name}</MyText>
                        <MyText style={dynamicStyles.time}>{item.created}</MyText>
                        <TouchableOpacity onPress={this.operationPress}
                                          style={[commonStyles.centerVH, dynamicStyles.more, {width: 30, height: 30}]}>
                            <MyIcon name='icon-xiangxia'
                                    color='#B3B3B3' size={12}
                            />
                        </TouchableOpacity>

                    </TouchableOpacity>
                </View>
                <TouchableOpacity onPress={this.onContentPress}>
                    {this.renderContent(item.content)}
                    {this.renderImages()}
                </TouchableOpacity>

                <View style={[commonStyles.flexRow, commonStyles.relative, dynamicStyles.bottom]}>
                    <Line style={[commonStyles.absolute, {left: 10, top: 0}]} width={SCREEN_WIDTH - 40}/>
                    <View style={commonStyles.flexRow}>
                        <TouchableOpacity onPress={this.likePress}>
                            <MyText
                                style={[dynamicStyles.like, this.getPraiseFlag() ? dynamicStyles.isLiked : null]}>{`${this.getPraiseCount()}赞`}</MyText>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.commentPress}>
                            <MyText style={dynamicStyles.comment}>{`${this.getCommentsCount()}评论`}</MyText>
                        </TouchableOpacity>

                    </View>
                    <View style={[commonStyles.flex1, commonStyles.flexEnd]}>
                        <MyText
                            style={dynamicStyles.like}>{this.props.item.user ? this.props.item.user.nickName : ''}</MyText>
                    </View>
                </View>
            </View>
        );
    }
}


export default connect(
    ({auth}) => ({auth})
)(DynamicItem);